Ext.namespace('Ext.ux.panel');

Ext.ux.panel.MenuTabPanel = function(config) {
	Ext.applyIf(this, config);

	for (i = 0, len = config.items.length; i < len; i++) {
		if (!config.items[i].id){
			config.items[i].id = Ext.id();
		}
		this.tabs[i] = {
			title : config.items[i].title,
			id : 'tab-'+ config.items[i].id
		};
		config.items[i].title = null;
	}
	Ext.apply(this.menuBar, {
		border : false,
		style : {
			'border-style' : 'none',
			'background' : 'none',
			'border-width' : 0,
			'border-top' : 0
		}
	});

	this.tabPanel = new Ext.TabPanel({
		border : false,
		region : 'west',
		xtype : 'tabpanel',
		activeTab : 0,
		hideBorders : true,
		items : this.tabs,
		listeners : {
			'tabchange' : this.onChangeTab.createDelegate(this)
		}
	});
	this.cardPanel = new Ext.Panel({
		id : Ext.id(),
		region : 'center',
		layout : 'card',
		activeItem : 0,
		border : false,
		items : config.items,
		autoScroll :true
	});

	Ext.ux.panel.MenuTabPanel.superclass.constructor.call(this, {
		layout : 'border',
		border : false,
		bodyBorder : false,
		items : [{
			id : 'northP',
			region : 'north',
			layout : 'border',
			height : 30,
			border : false,
			bodyBorder : false,
			items : [this.tabPanel, {
				border : false,
				region : 'center'
			}, {
				region : 'east',
				border : false,
				width : 50,
				tbar : this.menuBar,
				bodyStyle : {
					'border-style' : 'none',
					'background' : 'none',
					'border-width' : 0,
					'border-top' : 0
				}
			}]
		}, this.cardPanel]

	});
};

Ext.extend(Ext.ux.panel.MenuTabPanel, Ext.Panel, {
	tabs : [],
	menuBar : undefined,

	onChangeTab : function() {
		var tab = this.tabPanel.getActiveTab();
		var id = tab.id.substring(4,tab.id.length);
		this.cardPanel.layout.setActiveItem(id);
	}
});